<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->

      <el-breadcrumb-item>基础设置</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/staff' }">员工信息</el-breadcrumb-item>
      <el-breadcrumb-item>添加员工</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="form_title">
        <h5>账号添加</h5>
      </div>
      <!-- 添加员工表单 -->
      <el-form ref="form" :model="form" label-width="95px" :rules="formRules">
        <el-form-item label="员工姓名：" prop="name">
          <el-col :span="11">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="登录账号：" prop="account">
          <el-col :span="11">
            <el-input v-model="form.account"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="登录密码：" prop="password">
          <el-col :span="11">
            <el-input v-model="form.password" type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码：" prop="password2">
          <el-col :span="11">
            <el-input v-model="form.password2" type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="state" label="状态：" prop="state">
          <div class="stateRadio">
            <el-radio v-model="form.state" label="1">启用</el-radio>
            <el-radio v-model="form.state" label="2">禁用</el-radio>
          </div>
        </el-form-item>

        <el-form-item class="formbutton">
          <el-button
            class="formsubmit"
            type="primary"
            @click="onSubmit"
            :disabled="disabled"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    //自定义验证两次输入密码是否相同
    var validatePass = (formRules, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      labelPosition: "right",
      form: {
        account: "",
        password: "",
        password2: "",
        state: "1",
      },

      //根据登录用户的权限来开启
      disabled: false,
      formRules: {
        name:[
          { required: true, message: "请输入员工姓名", trigger: "blur" }
        ],
        // 验证用户名是否合法
        account: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        //判断确认密码是否与密码一致
        password2: [
          {
            validator: validatePass,
            trigger: "blur",
            required: true,
          },
        ],
      },
    };
  },
  methods: {
    //提交调用相应的接口
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        console.log("valid:" + valid);
        if (valid) {
          console.log(this.form);
          console.log("submit!");
          //调用提交接口
          const { data: res } = await this.$http.post(
            "staff/insertStaff",
            this.form
          );
          console.log(res);
          if (res.code != 200) {
            this.$message.error(res.massage);
            return;
          }
          this.$message.success("添加用户成功！");
          this.$router.replace("/staff");
        } else {
          console.log("表单问题");
          this.$message.error("请遵守表单的填写规则");
          return;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.form_title {
  height: 40px;
  text-align: left;
  line-height: 0px;
  letter-spacing: 1px;
  border-left: rgba(64, 158, 255, 0.781) solid 3px;
  box-shadow: 0 3px 8px #ddd;
  padding-left: 10px;
  margin-top: 0px;
  overflow: hidden;
}

.el-form {
  width: 800px;
  margin: 50px auto;
  text-align: center;
  padding-left: 350px;
}
.formbutton,
.state {
  position: relative;
}
.formbutton .formsubmit,
.state .stateRadio {
  position: absolute;
  left: 80px;
}
</style>
